<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8"/>
	<style>
		.example{
			width: 150px;
			height: 80px;
			margin: 10px;
		}
		.example1{
			background: -moz-radial-gradient(#ace, #f96, #1E90FF);
			background: -webkit-radial-gradient(#ace, #f96, #1E90FF);
		}
		.example2{
			background: -moz-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);
			background: -webkit-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);
		}
		.example3{
			background: -moz-radial-gradient(bottom left, circle, #ace, #f96, #1E90FF);
			background: -webkit-radial-gradient(bottom left, circle, #ace, #f96, #1E90FF);
		}
		.example4{
			background: -moz-radial-gradient(bottom left, ellipse, #ace, #f96, #1E90FF);
			background: -webkit-radial-gradient(bottom left, ellipse, #ace, #f96, #1E90FF);
		}
		.example5 {
			background: -moz-radial-gradient(ellipse closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
			background: -webkit-radial-gradient(ellipse closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
		}

		.example6 {
			background: -moz-radial-gradient(ellipse farthest-corner, #ace, #f96 10%, #1E90FF 50%, #f96);
			background: -webkit-radial-gradient(ellipse farthest-corner, #ace, #f96 10%, #1E90FF 50%, #f96);
		}
		.example7 {
			background: -moz-radial-gradient(circle closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
			background: -webkit-radial-gradient(circle closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
		}
		.example8 {
			background: -moz-radial-gradient(circle farthest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
			background: -webkit-radial-gradient(circle farthest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
		}
		.example9 {
			background: -moz-radial-gradient(#ace, #f96, #1E90FF);
			background: -webkit-radial-gradient(#ace, #f96, #1E90FF);
		}
		.example10 {
			background: -moz-radial-gradient(contain, #ace, #f96, #1E90FF);
			background: -webkit-radial-gradient(contain, #ace, #f96, #1E90FF);
		}
		.example11 {
			/* Firefox 3.6+ */
			background: -moz-radial-gradient(circle, #ace, #f96);
			/* Safari 4-5, Chrome 1-9 */
			/* Can't specify a percentage size? Laaaaaame. */
			background: -webkit-gradient(radial, center center, 0, center center, 460, from(#ace), to(#f96));
			/* Safari 5.1+, Chrome 10+ */
			background: -webkit-radial-gradient(circle, #ace, #f96);
		}
		.example12 {
			/* Firefox 3.6+ */
			/* -moz-radial-gradient( [ || ,]? [ || ,]? , [, ]* ) */
			background: -moz-radial-gradient(80% 20%, closest-corner, #ace, #f96);
			/* Safari 4-5, Chrome 1-9 */
			background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#ace), to(#f96));
			/* Safari 5.1+, Chrome 10+ */
			background: -webkit-radial-gradient(80% 20%, closest-corner, #ace, #f96);
		}

	</style>
</head>
<body>
<div class="example example1"></div>
<div class="example example2"></div>
<hr/>
<div class="example example3"></div>
<div class="example example4"></div>
<hr/>
<div class="example example5"></div>
<div class="example example6"></div>
<div class="example example7"></div>
<div class="example example8"></div>
<hr/>
<div class="example example9"></div>
<div class="example example10"></div>
<div class="example example11"></div>
<div class="example example12"></div>
</body>
</html>
